<template>
    <view class="content">
        <view class="too">
            <view class="too_a">
                <!-- <image src="../../static/shanjia.png" mode=""></image> -->
                <view class="too_aa">
                    <p>我是你</p>
                    <view class="too_aac">
                        <image src="../../static/yue.png" mode=""></image>
                        <span>余额：￥10</span>
                    </view>
                </view>
            </view>
            <view class="too_b"><!-- <image src="../../static/shezhi.png" mode=""></image> --></view>
        </view>
        <view class="liucheng" @click="dindan">
            <view class="liucheng_top">
                <view class="liucheng_top_a">我的订单</view>
                <view class="liucheng_top_b">》</view>
            </view>
            <view class="homebot">
                <view class="liucheng_bot"><view class="liucheng_bot_a">我的功能</view></view>
                <view class="homebotbox flex justify-around">
                    <view v-for="(item, index) in homeList" :key="item.name" @click="jump(index)">
                        <image :src="item.icon"></image>
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mendian: false,
            homeList: [
                { name: '我的门店', cls: 'thepayment', icon: '/static/homtbottom/3.png' },
                { name: '收货地址', cls: 'ongoing', icon: '/static/homtbottom/4.png' },
                //{name: '发布需求'  , cls: 'evaluate'  ,	icon:'/static/homtbottom/1.png'},
                //{name: '参与需求'  , cls: 'completed' ,	icon:'/static/homtbottom/2.png'},
            ],
        };
    },
    onLoad() {
        uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ff0000',
            animation: {
                duration: 400,
                timingFunc: 'easeIn',
            },
        });
    },
    methods: {
        dindan() {
            uni.navigateTo({
                // url: './me/dingdan_xq'
            });
        },
        jump(e) {
            if (e === 0) {
                uni.navigateTo({
                    url: './me/merchSettled',
                });
            } else if (e === 1) {
                uni.navigateTo({
                    url: './me/shipAddr',
                });
            } else if (e === 2) {
                uni.navigateTo({
                    url: './xuqiu/fabu_xuqiu',
                });
            } else if (e === 3) {
                uni.navigateTo({
                    url: '',
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
    background-color: #f5f8fd;
}
.too {
    width: 100%;
    height: 160rpx;
    background-color: #ff0000;
    display: flex;
    justify-content: space-around;
    .too_a {
        width: 500rpx;
        height: 160rpx;
        display: flex;
        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            margin-top: 20rpx;
        }
        .too_aa {
            color: #ffffff;
            margin-left: 30rpx;
            margin-top: 20rpx;
            .too_aac {
                margin-top: 5rpx;
                image {
                    width: 30rpx;
                    height: 30rpx;
                }
                span {
                    margin-left: 10rpx;
                    font-size: 24rpx;
                }
            }
        }
    }
    .too_b {
        width: 100rpx;
        height: 160rpx;
        image {
            width: 36rpx;
            height: 36rpx;
            margin-top: 50rpx;
            margin-left: 60rpx;
        }
    }
}
.liucheng {
    width: 100%;
    height: 80rpx;
    background-color: #ffffff;
    .liucheng_top {
        width: 100%;
        height: 88rpx;
        border-bottom: 1rpx solid #f7f6f6;
        display: flex;
        justify-content: space-between;
        .liucheng_top_a {
            width: 130rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-top: 25rpx;
            margin-left: 30rpx;
        }
        .liucheng_top_b {
            width: 11rpx;
            height: 23rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-top: 25rpx;
            margin-right: 30rpx;
        }
    }

    .hometop {
        width: 100%;
        height: 146rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 24rpx;
        color: #ccc;
        border-top: 2rpx solid #000;
        background: #fff;
        margin-bottom: 20rpx;
        .hometopbox {
            display: flex;
            flex-direction: column;
            align-items: center;
            image {
                width: 50rpx;
                height: 50rpx;
                padding-bottom: 20rpx;
            }
            // .loopBanner(1)
        }
    }
    .homebot {
        width: 750rpx;
        min-height: 146rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333;
        background: #fff;
        .liucheng_bot {
            height: 88rpx;
            display: flex;
            align-items: center;
            padding-left: 30rpx;
        }
        .homebotbox {

            view {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 30rpx;
                image {
                    width: 50rpx;
                    height: 50rpx;
                    // padding-bottom: 20rpx;
                }
                text {
                    margin-top: 20rpx;
                }
            }
        }
    }
    // .liucheng_bott {
    // 	width: 100%;
    // 	height: 146rpx;
    // 	display: flex;
    // 	justify-content: space-around;
    // 	.liuc_a {
    // 		width: 100rpx;
    // 		height: 90rpx;
    // 		margin-top: 25rpx;
    // 		image {
    // 			width: 50rpx;
    // 			height: 50rpx;
    // 			margin-left: 25rpx;
    // 		}
    // 		p {
    // 			width: 100rpx;
    // 			height: 23rpx;
    // 			font-size: 24rpx;
    // 			font-family: PingFang SC;
    // 			font-weight: 500;
    // 			color: #333333;
    // 			text-align: center;
    // 		}
    // 	}
    // }
}
// .gongneng {
// 	width: 100%;
// 	height: 240rpx;
// 	margin-top: 20rpx;
// 	background-color: #FFFFFF;
// 	.tit_gong {
// 		width: 130rpx;
// 		height: 28rpx;
// 		font-size: 30rpx;
// 		font-family: PingFang SC;
// 		font-weight: 500;
// 		color: #333333;
// 		padding-top: 20rpx;
// 		margin-left: 30rpx;
// 	}
// 	.gn_tu {
// 		width: 100%;
// 		height: 180rpx;
// 		margin-top: 20rpx;
// 		display: flex;
// 		justify-content: space-around;
// 		.gn_tu_a {
// 			width: 140rpx;
// 			height: 120rpx;
// 			margin-top: 20rpx;
// 			image {
// 				width: 50rpx;
// 				height: 50rpx;
// 				margin-left: 50rpx;
// 			}
// 			p {
// 				width: 140rpx;
// 				height: 29rpx;
// 				font-size: 28rpx;
// 				font-family: PingFang SC;
// 				font-weight: 500;
// 				color: #333333;
// 				text-align: center;
// 			}
// 		}
// 		.gn_tu_b {
// 			width: 140rpx;
// 			height: 120rpx;
// 			margin-top: 20rpx;
// 			image {
// 				width: 30rpx;
// 				height: 50rpx;
// 				margin-left: 55rpx;
// 			}
// 			p {
// 				width: 140rpx;
// 				height: 29rpx;
// 				font-size: 28rpx;
// 				font-family: PingFang SC;
// 				font-weight: 500;
// 				color: #333333;
// 				text-align: center;
// 			}
// 		}
// 		.gn_tu_c {
// 			width: 140rpx;
// 			height: 120rpx;
// 			margin-top: 20rpx;
// 			image {
// 				width: 42rpx;
// 				height: 50rpx;
// 				margin-left: 55rpx;
// 			}
// 			p {
// 				width: 140rpx;
// 				height: 29rpx;
// 				font-size: 28rpx;
// 				font-family: PingFang SC;
// 				font-weight: 500;
// 				color: #333333;
// 				text-align: center;
// 			}
// 		}

// 	}
// }

// {name: '待付款', cls: 'thepayment'},
// {name: '进行中', cls: 'ongoing'},
// {name: '待评价', cls: 'evaluate'},
// {name: '已完成', cls: 'completed'},
// {name: '退款', cls: 'refund'},

// 遍历首页所有的图片方法
// @color: #f00 #f0f #f00 #0ff #00f  //定义变量 存数组
// @names: thepayment ongoing evaluate completed refund;

// .loopBanner(@index) when (@index <= length(@color)) {
//     @c:extract(@color, @index);
//     @n:extract(@names, @index);
//     &.@{n} {
//         view text {
//             color: @c;
//         }
//         image {
//             background: url("../../static/hometop/@{index}.png") center center / 32px 32px no-repeat;
//         }
//     }
//     // 递归调自己
//     .loopBanner(@index + 1);
// }
</style>
